<template>
     <layout :showHome="false" showBack title="新增材料">

          <van-form @submit="onSubmit">
               <van-field
                    v-model="pageData.name"
                    name="材料名字"
                    label="材料名字"
                    placeholder="请输入材料名字"
                    :rules="[{ required: true, message: '请填写材料名字' }]"
               />
               <van-field
                    v-model="pageData.parentName"
                    center
                    clearable
                    label="所属大类"
                    placeholder="请选择材料所属大类"
                    >
                    <template #button>
                    <van-button size="small" type="primary"    @click="show = true"   native-type="button"   >选择大类</van-button>
                    </template>
                </van-field>

                <van-field
                    v-model="pageData.remark"
                    rows="2"
                    autosize
                    label="备注"
                    type="textarea"
                    maxlength="50"
                    placeholder="请输入备注"
                    show-word-limit
                    />
               <div style="margin: 16px;">
                <van-button round block type="info" >提交</van-button>
               </div>
          </van-form>



           
          <van-popup  :close-on-click-overlay = "false"   v-model="show"  position="bottom" :style="{ height: '30%' }" >
               <van-picker title="请选择大类" show-toolbar :columns="typeList"  @confirm="onOk"  @cancel=" show = false" />  
          </van-popup>
          
     </layout>
</template>

<script>
import { materialListApi } from '../../apis/materialApi'

import   axios  from 'axios'

export default {
     data(){

          return  {
               
               typeList:[],
               show:false,
               pageData:{
                    id: "",
                    name: "",
                    parentId: "",
                    parentName: "",
                    remark: ""
               }

          }

          
     },


    created(){



     this.getTypeList()

   
    },
  

                         


     methods: {


          getTypeList:function(){
                     // 这里不用async + await写法 。因为每一个接口返回的是一个promise
                         materialListApi().then((data)=>{
                              if(data.code === 200){

                                   // 筛选出 大类， 根据其 parentId为空这个特征来筛选
                                   this.typeList =  data.data.rows.filter((v)=>{
                                        
                                        return   !v.parentId
                                   }).map(it => {
                                   
                                        // 观察组件，分析可知，需要给每一项添加 text 属性，才能渲染出 大类
                                        it.text = it.name

                                        return  it  
                                   })
                              }
                         })
          },      
                 
               onOk:function( item ){

                    console.log('onOK=================',arguments)
                      this.pageData.parentId = item.id
                      this.pageData.parentName = item.name
                      this.show = false
               },

               // 表单提交方法
              // 采用  axios原生请求方法，此种请求方式没有对axios进行封装
               onSubmit(){
                    axios.post('/apis/material/save',this.pageData,{
                         timeout:5000,
                         headers:{token:this.$store.getters['common/token']}
                    }).then((data)=>{
                        
                         if(data.data.code === 200){
                               if(!this.pageData.parentId){
                                   this.getTypeList()  
                               }
                               this.pageData = {
                                             id: "",
                                             name: "",
                                             parentId: "",
                                             parentName: "",
                                             remark: ""
                                       }
                            this.$toast.success('保存材料信息成功')  
                         }else{
                              this.$toast.fail('保存用户信息失败')
                         }
                        

                    }).catch(e =>{
                         console.log(e)
                         this.$toast.fail('保存用户信息失败')
                    })
               }


          } 
}
</script>